import React from "react";
import { Head, RankCont } from "./style";
import { ranking,praise } from "../../api";
import { connect } from "react-redux";
import { Toast } from "antd-mobile";

const one = require("../../assets/img_01.png");
const two = require("../../assets/img_02.png");
const three = require("../../assets/img_03.png");
class Index extends React.PureComponent {
  state = {
    rankList: []
  };
  componentDidMount() {
    ranking({
      id: this.props.match.params.id,
      mid: this.props.userInfo.id
    }).then(res => {
      this.setState({
        rankList: res.data.data
      });
    });
  }
  getPraise(rid, aid){
    praise({
      praise_id: this.props.userInfo.id,
      record_id: rid,
      activity_id: aid
    }).then(res => {
      Toast.info(res.data.message, 3);
    })
  }
  rankNum(i) {
    switch (i) {
      case 0:
        return "<img src=" + one + ' alt="" />';
      case 1:
        return "<img src=" + two + ' alt="" />';
      case 2:
        return "<img src=" + three + ' alt="" />';
      default:
        return i + 1;
    }
  }
  render() {
    return (
      <div>
        <Head>
          <div className="tx">
            <img src={this.props.userInfo.avatar} alt="" />
          </div>
          <p>
            {this.props.userInfo.nickname} <br /> 排名第10，加油！
          </p>
        </Head>

        <RankCont>
          {this.state.rankList.map((item, index) => {
            return (
              <li key={item.id} onClick={this.getPraise.bind(this, item.id,item.activity_id)}>
                {index < 3 ? (
                  <span
                    dangerouslySetInnerHTML={{
                      __html: this.rankNum(index)
                    }}
                  />
                ) : (
                  <span>{index + 1}</span>
                )}

                <img className="tx" src={item.member.avatar} alt="" />
                {item.member.nickname}
              </li>
            );
          })}
        </RankCont>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  userInfo: state.userInfo
});
const mapDispatchToProps = dispatch => ({});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Index);
